<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { Image, Tabs, TabPane, Empty, Button, Upload, message, Spin } from 'ant-design-vue';
import { getPhotographerPortfolio, uploadPortfolioImage } from '#/api/wedding/photographer/index';
import { Plus } from '@vben/icons';
import type { UploadChangeParam } from 'ant-design-vue';

const props = defineProps<{
  photographerCode: string;
  editable?: boolean;
}>();

const emit = defineEmits(['refresh']);

const loading = ref(false);
const portfolioData = ref<Array<{
  id: number;
  title: string;
  style: string;
  images: string[];
  description: string;
  createTime: string;
}>>([]);

const activeStyle = ref('全部');

// 风格分类
const styles = computed(() => {
  const styleSet = new Set(['全部']);
  portfolioData.value.forEach(item => {
    styleSet.add(item.style);
  });
  return Array.from(styleSet);
});

// 筛选后的作品
const filteredPortfolio = computed(() => {
  if (activeStyle.value === '全部') {
    return portfolioData.value;
  }
  return portfolioData.value.filter(item => item.style === activeStyle.value);
});

const loadPortfolio = async () => {
  loading.value = true;
  try {
    const data = await getPhotographerPortfolio(props.photographerCode);
    portfolioData.value = data.list;
  } finally {
    loading.value = false;
  }
};

// 上传作品
const handleUpload = async (info: UploadChangeParam) => {
  if (info.file.status === 'done') {
    message.success('作品上传成功');
    await loadPortfolio();
    emit('refresh');
  } else if (info.file.status === 'error') {
    message.error('作品上传失败');
  }
};

const customRequest = async (options: any) => {
  try {
    const url = await uploadPortfolioImage(options.file);
    options.onSuccess({ url }, options.file);
  } catch (error) {
    options.onError(error);
  }
};

onMounted(() => {
  loadPortfolio();
});
</script>

<template>
  <div>
    <div class="mb-4 flex justify-between items-center">
      <Tabs v-model:activeKey="activeStyle" type="card">
        <TabPane v-for="style in styles" :key="style" :tab="style" />
      </Tabs>
      
      <Upload
        v-if="editable"
        :custom-request="customRequest"
        :show-upload-list="false"
        :multiple="true"
        accept="image/*"
        @change="handleUpload"
      >
        <Button type="primary">
          <template #icon><Plus /></template>
          上传作品
        </Button>
      </Upload>
    </div>

    <Spin :spinning="loading">
      <div v-if="filteredPortfolio.length > 0" class="grid grid-cols-4 gap-4">
        <div 
          v-for="item in filteredPortfolio" 
          :key="item.id"
          class="border rounded overflow-hidden hover:shadow-lg transition-shadow"
        >
          <Image.PreviewGroup>
            <div class="relative" style="height: 200px;">
              <Image
                v-if="item.images && item.images.length > 0"
                :src="item.images[0]"
                :width="'100%'"
                :height="200"
                class="object-cover"
              />
              <div 
                v-if="item.images && item.images.length > 1"
                class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded"
              >
                共 {{ item.images.length }} 张
              </div>
            </div>
            <!-- 隐藏的其他图片供预览 -->
            <Image
              v-for="(img, idx) in item.images.slice(1)"
              :key="idx"
              :src="img"
              style="display: none;"
            />
          </Image.PreviewGroup>
          <div class="p-3">
            <div class="font-medium mb-1">{{ item.title }}</div>
            <div class="text-xs text-gray-500 mb-2">{{ item.style }}</div>
            <div class="text-xs text-gray-400 line-clamp-2">
              {{ item.description || '暂无描述' }}
            </div>
          </div>
        </div>
      </div>
      
      <Empty v-else description="暂无作品" />
    </Spin>
  </div>
</template>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

